<template>
  <div class="common-layout">
    <!-- 整体布局容器 -->
    <el-container style="height: 100vh; overflow: hidden">
      <!-- 顶部导航栏（集成面包屑） -->
      <el-header class="main-header">
        <div class="header-content">
          <!-- 左侧品牌和面包屑 -->
          <div class="header-left">
            <div class="brand-container">
              <img src="../components/icons/生成相关图片 (2).png" class="nav-logo" alt="远帆起航" />
              <h1 class="company-name">远帆起航仓储管理</h1>
            </div>
            <!-- 面包屑导航 -->
            <el-breadcrumb :separator-icon="ArrowRight" class="header-breadcrumb">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>仓储管理</el-breadcrumb-item>
              <el-breadcrumb-item>库存清单</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!-- 右侧用户操作区域 -->
          <div class="header-right">
            <el-icon class="header-icon">
              <Bell />
            </el-icon>
            <el-icon class="header-icon">
              <User />
            </el-icon>
            <el-dropdown>
              <span class="user-name">{{ store.userCounter.role_Name }}<i class="el-icon-arrow-down" /></span>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 主体内容区域 -->
      <el-container style="overflow: hidden">
        <!-- 左侧导航菜单 -->
        <el-aside width="240px" class="main-aside">
          <el-menu class="nav-menu" router>
            <!-- 仓储总览 -->
            <el-menu-item index="/dashboard">
              <el-icon>
                <DataBoard />
              </el-icon>
              <span>仓储总览</span>
            </el-menu-item>
            <!-- 库存管理 -->
            <el-sub-menu index="inventory">
              <template #title>
                <el-icon>
                  <Box />
                </el-icon>
                <span>库存管理</span>
              </template>
              <el-menu-item index="/ceshi1">库存清单</el-menu-item>
              <el-menu-item index="/ceshi">货物流转</el-menu-item>
            </el-sub-menu>

            <!-- 仓储报表 -->
            <el-menu-item index="/report">
              <el-icon>
                <Document />
              </el-icon>
              <span>仓储报表</span>
            </el-menu-item>
            <!-- 基础数据 -->
            <el-sub-menu index="basic-data">
              <template #title>
                <el-icon>
                  <Box />
                </el-icon>
                <span>基础数据</span>
              </template>
              <el-menu-item index="">字典管理</el-menu-item>
              <el-menu-item index="">字典项管理</el-menu-item>
              <el-menu-item index="">供应商管理</el-menu-item>
              <el-menu-item index="/warehouse">库房管理</el-menu-item>
              <el-menu-item index="">库区管理</el-menu-item>
              <el-menu-item index="">货架管理</el-menu-item>
              <el-menu-item index="">站台管理</el-menu-item>
              <el-menu-item index="">巷道管理</el-menu-item>
              <el-menu-item index="">仓位管理</el-menu-item>
              <el-menu-item index="">托盘管理</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="main-content">
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { DataBoard, Box, Document, Bell, User, ArrowRight } from '@element-plus/icons-vue'
import { useCounterStore } from "@/stores/counter"
import { onMounted } from 'vue';
const store = useCounterStore()
console.log(store.userCounter.role_Name)

</script>

<style scoped lang="scss">
/* 全局隐藏滚动条 */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

/* Chrome/Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* 布局容器 */
.common-layout {
  height: 100vh;
  overflow: hidden;
}

/* 顶部导航栏 */
.main-header {
  height: 64px !important;
  /* 固定高度 */
  background: #2c3e50;
  /* 深灰色 */
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* 分割线 */

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .header-left {
      display: flex;
      align-items: center;
      gap: 24px;

      .brand-container {
        display: flex;
        align-items: center;
        gap: 12px;

        .nav-logo {
          height: 36px;
          /* 缩小Logo */
          border-radius: 4px;
          /* 圆角 */
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          /* 轻微阴影 */

        }

        .company-name {
          margin: 0;
          color: #fff;
          font-size: 20px;
          /* 缩小字体 */
          font-weight: 500;
          letter-spacing: 1px;
        }
      }

      .header-breadcrumb {
        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            color: rgba(255, 255, 255, 0.8);
            /* 半透明白色 */
            font-size: 14px;

            &:hover {
              color: #fff;
            }
          }

          &:last-child .el-breadcrumb__inner {
            color: #fff;
            font-weight: 500;
          }
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;

      .header-icon {
        color: rgba(255, 255, 255, 0.8);
        font-size: 20px;
        transition: all 0.3s;

        &:hover {
          color: #fff;
          transform: scale(1.1);
        }
      }

      .user-name {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;

        &:hover {
          color: #fff;
        }
      }
    }
  }
}

/* 左侧导航菜单 */
.main-aside {
  background: #f8f9fa;
  /* 浅灰色背景 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);

  .nav-menu {
    border-right: none;

    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
      height: 48px;
      /* 更紧凑的菜单项高度 */
      line-height: 48px;
      font-size: 14px;
      color: #2c3e50;
      /* 深灰色文字 */

      .el-icon {
        font-size: 16px;
        color: #2c3e50;
        /* 深灰色图标 */
      }

      &:hover {
        background-color: #f5f5f5;
        /* 悬停时的背景色 */
        color: #2c3e50;
        /* 悬停时的文字颜色 */
      }

      &.is-active {
        background-color: #f0f0f0;
        /* 选中时的背景色 */
        color: #2c3e50;
        /* 选中时的文字颜色 */
      }
    }

    :deep(.el-sub-menu) {
      &.is-active .el-sub-menu__title {
        background-color: #f0f0f0;
        /* 选中子菜单时的背景色 */
        color: #2c3e50;
        /* 选中子菜单时的文字颜色 */
      }

      .el-menu-item {
        &.is-active {
          background-color: #f0f0f0;
          /* 选中子菜单项时的背景色 */
          color: #2c3e50;
          /* 选中子菜单项时的文字颜色 */
        }
      }
    }
  }
}

/* 主内容区 */
.main-content {
  background: #ffffff;
  /* 白色背景 */
  height: calc(100vh - 64px);
  padding: 16px;
  /* 减少内边距 */
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>